<template>
    <table>
        <thead>
            <slot name="tablehead">
                <Thead>
                    <th>管理</th>
                    <th>ID</th>
                    <th>价格</th>
                    <th>产品名称</th>
                </Thead>
            </slot>

        </thead>
        <tbody>
            <!-- 把数据通过props传入组件内部. -->
            <!-- 可以通过插槽来往组件内部传入html结构，从而定制组件的html结构 -->
            <slot name="tablebody" :tdata="tableData">
                <Tbody :productlist="tableData">
                    <!-- v-slot指令指定具名插槽的名称 -->
                    <template v-slot:rows>
                        <tr v-for="item in tableData">
                            <td><button>删除</button><button>修改</button></td>
                            <td>{{item.id}}</td>
                            <td>{{item.price}}</td>
                            <td>{{item.name}}</td>
                        </tr>
                    </template>
                </Tbody>
            </slot>
        </tbody>
    </table>
</template>

<script>
    import Thead from './Thead.vue'
    import Tbody from './Tbody.vue'
    export default {
        props:['tableData'],
        data(){
            return {
                
            }
        },
        components:{
            Thead,Tbody
        }
    }
</script>

<style lang="scss" scoped>

</style>